<template>
    <view class="container">
        <intake-nav-bar title="国润甄泉" dark :fixed="true" />
      <view class="success-message">
        <view class="title">零钱支付</view>
        <view class="choice-card" v-for="(item,index) in waterList" :key="index" @click="changeIndex(index)" :class="{active:active === index}">
          <text class="price">{{item.price}}&nbsp;<text class="small-text"> 元</text></text>
          <text>{{item.name}}</text>
        </view>
      </view>
      <view class="shipping-info" @click="recharge()">
        立即支付
      </view>
    </view>
  </template>
  
  <script> 
  export default {
    data() {
      return {
        active:0,
        waterList:[{name:'富氢水',price:'5'},{name:'矿化水',price:'1.8'},{name:'纯净水',price:'1.2'}],
        icon:this.$common.imgUrl() + '/images/member/rankingIcon.png',
        // 您可以在这里添加更多的数据绑定
      };
    },
    methods: {
        changeIndex(index){
            this.active = index
        },
      recharge(){
        this.$common.navTo('/pages/intake/recharge/address');
      }
    }
  };
  </script>
  
  <style lang="scss">
  .container {
    width: 100%;
    height: 100vh;
    padding: 20px;
    background: linear-gradient(to bottom, #E3EAFB 0%, transparent 100%);
  }
  
  .success-message {
    width: 690rpx;
    height: 281rpx;
    background-color: #fff;
    border-radius: 20rpx;
    font-size: 29rpx;
    // margin: 124rpx 0 20px 0;
    padding: 36rpx 32rpx;
   .title{
    width: 100%;
   }
    
    .choice-card{
        display: grid;
        width: 189rpx;
        height: 135rpx;
        background-color: #fff;
        border:solid 1px #f7f7f7;
        text-align: center;
        margin: 28rpx 10rpx;
        float: left;
        line-height: 20rpx;
        padding: 32rpx 0 0 0 ;
        .price{
            font-size: 48rpx;
            font-weight: 500;
        }
        .small-text{
          font-size: 21rpx;
          margin-left: 5rpx;
        }
    }
    .active{
        background-color: #F7F7F7;
    }
  }
  .shipping-info {
    width: 690rpx;
    height: 99rpx;
    line-height: 99rpx;
    border-radius: 10rpx;
    background-color: #034EFD;
    text-align: center;
    font-weight: 600;
    font-size: 38rpx;
    color: #FDFEFF;
  }
  
  
  </style>